<template>
    <div class="home">
        <el-container>
            <el-header>
              <h3>宏烨找房后台管理系统</h3>
              <li><el-button type="primary" @click="GoBack">退出登录</el-button></li>
            </el-header>
            <el-container class="el-body">
                <el-aside :width="isCollapse?'64px':'200px'">
                  <div class="flag" :v-model="isCollapse">
                    <li @click="handlCollapse">{{isname}}</li>
                  </div>
                  <el-menu
                    :default-active="activePath"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    :collapse="isCollapse"
                    unique-opened
                    :collapse-transition="false"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b" router >
                    <el-menu-item :index="v.path" v-for="(v,i) in routeList" :key="i">
                      <i :class="v.icon"></i>
                      <span slot="title">{{v.title}}</span>
                    </el-menu-item>
                  </el-menu>
                </el-aside>
                <el-main>
                  <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import routes from '../../utils/filterRouter'
export default {
  data () {
    return {
      isCollapse: false,
      activePath: '',
      routeList: [],
      isname: ''
    }
  },
  created () {
    this.routeList = routes()
    this.isname = window.sessionStorage.auth
  },
  methods: {
    handlCollapse () {
      this.isCollapse = !this.isCollapse
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    GoBack () {
      this.routeList = []
      this.$router.push('/login')
      window.sessionStorage.clear()
      window.sessionStorage.clear()
    }
  }
}
</script>

<style>
.home{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.el-header{
    background: cornflowerblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
.el-body{
  width: 100%;
  flex: 1;
}
.el-aside {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.flag {
  width: 100%;
  height: 50px;
  background: rgb(84, 92, 100);
}
.flag li{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
}
.el-menu{
  width: 100%;
  flex: 1;
  overflow: hidden;
}
.el-menu-item{
  width: 100%;
}
.el-main {
    background-color: #E9EEF3;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>
